<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图标 | 基础</title>
	<link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
	<link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		.icon-list {
			overflow: hidden;
			border: 1px solid #dfe9f2;
			border-width: 1px 0 0 1px;
			border-radius: 4px;
		}
		.icon-list > li {
			float:left;
			width: 16.66%;
			padding: 5px 0 10px;
			text-align: center;
			color: #666;
			font-size: 13px;
			margin-right: -1px;
			border: 1px solid #dfe9f2;
			border-width: 0 1px 1px 0;
			list-style-type: none;
		}
		.icon-list i {font-size: 32px;}
		.fontclass {color: #606266;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>图标</dd>
			<dt>描述：</dt>
			<dd>采用 iconfont 技术的图标。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_icon.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<ul class="icon-list">
			<li>
				<i class="icon-activity"></i>
				<div class="fontclass">icon-activity</div>
			</li>
			<li>
				<i class="icon-airplay"></i>
				<div class="fontclass">icon-airplay</div>
			</li>
			<li>
				<i class="icon-alert-circle"></i>
				<div class="fontclass">icon-alert-circle</div>
			</li>
			<li>
				<i class="icon-alert-triangle"></i>
				<div class="fontclass">icon-alert-triangle</div>
			</li>
			<li>
				<i class="icon-align-center"></i>
				<div class="fontclass">icon-align-center</div>
			</li>
			<li>
				<i class="icon-align-justify"></i>
				<div class="fontclass">icon-align-justify</div>
			</li>
			<li>
				<i class="icon-align-left"></i>
				<div class="fontclass">icon-align-left</div>
			</li>
			<li>
				<i class="icon-align-right"></i>
				<div class="fontclass">icon-align-right</div>
			</li>
			<li>
				<i class="icon-anchor"></i>
				<div class="fontclass">icon-anchor</div>
			</li>
			<li>
				<i class="icon-arrow-down"></i>
				<div class="fontclass">icon-arrow-down</div>
			</li>
			<li>
				<i class="icon-arrow-left"></i>
				<div class="fontclass">icon-arrow-left</div>
			</li>
			<li>
				<i class="icon-arrow-right"></i>
				<div class="fontclass">icon-arrow-right</div>
			</li>
			<li>
				<i class="icon-arrow-up"></i>
				<div class="fontclass">icon-arrow-up</div>
			</li>
			<li>
				<i class="icon-at-sign"></i>
				<div class="fontclass">icon-at-sign</div>
			</li>
			<li>
				<i class="icon-award"></i>
				<div class="fontclass">icon-award</div>
			</li>
			<li>
				<i class="icon-bar-chart"></i>
				<div class="fontclass">icon-bar-chart</div>
			</li>
			<li>
				<i class="icon-battery"></i>
				<div class="fontclass">icon-battery</div>
			</li>
			<li>
				<i class="icon-bell-off"></i>
				<div class="fontclass">icon-bell-off</div>
			</li>
			<li>
				<i class="icon-bell"></i>
				<div class="fontclass">icon-bell</div>
			</li>
			<li>
				<i class="icon-bluetooth"></i>
				<div class="fontclass">icon-bluetooth</div>
			</li>
			<li>
				<i class="icon-book"></i>
				<div class="fontclass">icon-book</div>
			</li>
			<li>
				<i class="icon-bookmark"></i>
				<div class="fontclass">icon-bookmark</div>
			</li>
			<li>
				<i class="icon-box"></i>
				<div class="fontclass">icon-box</div>
			</li>
			<li>
				<i class="icon-briefcase"></i>
				<div class="fontclass">icon-briefcase</div>
			</li>
			<li>
				<i class="icon-camera-off"></i>
				<div class="fontclass">icon-camera-off</div>
			</li>
			<li>
				<i class="icon-camera"></i>
				<div class="fontclass">icon-camera</div>
			</li>
			<li>
				<i class="icon-check-circle"></i>
				<div class="fontclass">icon-check-circle</div>
			</li>
			<li>
				<i class="icon-check-square"></i>
				<div class="fontclass">icon-check-square</div>
			</li>
			<li>
				<i class="icon-check"></i>
				<div class="fontclass">icon-check</div>
			</li>
			<li>
				<i class="icon-chevron-down"></i>
				<div class="fontclass">icon-chevron-down</div>
			</li>
			<li>
				<i class="icon-chevron-left"></i>
				<div class="fontclass">icon-chevron-left</div>
			</li>
			<li>
				<i class="icon-chevron-right"></i>
				<div class="fontclass">icon-chevron-right</div>
			</li>
			<li>
				<i class="icon-chevron-up"></i>
				<div class="fontclass">icon-chevron-up</div>
			</li>
			<li>
				<i class="icon-chrome"></i>
				<div class="fontclass">icon-chrome</div>
			</li>
			<li>
				<i class="icon-circle"></i>
				<div class="fontclass">icon-circle</div>
			</li>
			<li>
				<i class="icon-clipboard"></i>
				<div class="fontclass">icon-clipboard</div>
			</li>
			<li>
				<i class="icon-clock"></i>
				<div class="fontclass">icon-clock</div>
			</li>
			<li>
				<i class="icon-cog"></i>
				<div class="fontclass">icon-cog</div>
			</li>
			<li>
				<i class="icon-command"></i>
				<div class="fontclass">icon-command</div>
			</li>
			<li>
				<i class="icon-comment-square"></i>
				<div class="fontclass">icon-comment-square</div>
			</li>
			<li>
				<i class="icon-cpu"></i>
				<div class="fontclass">icon-cpu</div>
			</li>
			<li>
				<i class="icon-cross"></i>
				<div class="fontclass">icon-cross</div>
			</li>
			<li>
				<i class="icon-crosshair"></i>
				<div class="fontclass">icon-crosshair</div>
			</li>
			<li>
				<i class="icon-delete"></i>
				<div class="fontclass">icon-delete</div>
			</li>
			<li>
				<i class="icon-disc"></i>
				<div class="fontclass">icon-disc</div>
			</li>
			<li>
				<i class="icon-download-cloud"></i>
				<div class="fontclass">icon-download-cloud</div>
			</li>
			<li>
				<i class="icon-download"></i>
				<div class="fontclass">icon-download</div>
			</li>
			<li>
				<i class="icon-droplet"></i>
				<div class="fontclass">icon-droplet</div>
			</li>
			<li>
				<i class="icon-edit"></i>
				<div class="fontclass">icon-edit</div>
			</li>
			<li>
				<i class="icon-expand"></i>
				<div class="fontclass">icon-expand</div>
			</li>
			<li>
				<i class="icon-external-link"></i>
				<div class="fontclass">icon-external-link</div>
			</li>
			<li>
				<i class="icon-eye-off"></i>
				<div class="fontclass">icon-eye-off</div>
			</li>
			<li>
				<i class="icon-eye"></i>
				<div class="fontclass">icon-eye</div>
			</li>
			<li>
				<i class="icon-fast-forward"></i>
				<div class="fontclass">icon-fast-forward</div>
			</li>
			<li>
				<i class="icon-file"></i>
				<div class="fontclass">icon-file</div>
			</li>
			<li>
				<i class="icon-filter"></i>
				<div class="fontclass">icon-filter</div>
			</li>
			<li>
				<i class="icon-flag"></i>
				<div class="fontclass">icon-flag</div>
			</li>
			<li>
				<i class="icon-folder"></i>
				<div class="fontclass">icon-folder</div>
			</li>
			<li>
				<i class="icon-globe"></i>
				<div class="fontclass">icon-globe</div>
			</li>
			<li>
				<i class="icon-grid"></i>
				<div class="fontclass">icon-grid</div>
			</li>
			<li>
				<i class="icon-hash"></i>
				<div class="fontclass">icon-hash</div>
			</li>
			<li>
				<i class="icon-headphones"></i>
				<div class="fontclass">icon-headphones</div>
			</li>
			<li>
				<i class="icon-heart"></i>
				<div class="fontclass">icon-heart</div>
			</li>
			<li>
				<i class="icon-home"></i>
				<div class="fontclass">icon-home</div>
			</li>
			<li>
				<i class="icon-image"></i>
				<div class="fontclass">icon-image</div>
			</li>
			<li>
				<i class="icon-inbox"></i>
				<div class="fontclass">icon-inbox</div>
			</li>
			<li>
				<i class="icon-info"></i>
				<div class="fontclass">icon-info</div>
			</li>
			<li>
				<i class="icon-layers"></i>
				<div class="fontclass">icon-layers</div>
			</li>
			<li>
				<i class="icon-layout"></i>
				<div class="fontclass">icon-layout</div>
			</li>
			<li>
				<i class="icon-life-buoy"></i>
				<div class="fontclass">icon-life-buoy</div>
			</li>
			<li>
				<i class="icon-loader"></i>
				<div class="fontclass">icon-loader</div>
			</li>
			<li>
				<i class="icon-location"></i>
				<div class="fontclass">icon-location</div>
			</li>
			<li>
				<i class="icon-lock"></i>
				<div class="fontclass">icon-lock</div>
			</li>
			<li>
				<i class="icon-mail"></i>
				<div class="fontclass">icon-mail</div>
			</li>
			<li>
				<i class="icon-map-pin"></i>
				<div class="fontclass">icon-map-pin</div>
			</li>
			<li>
				<i class="icon-map"></i>
				<div class="fontclass">icon-map</div>
			</li>
			<li>
				<i class="icon-maximize"></i>
				<div class="fontclass">icon-maximize</div>
			</li>
			<li>
				<i class="icon-menu"></i>
				<div class="fontclass">icon-menu</div>
			</li>
			<li>
				<i class="icon-mic-off"></i>
				<div class="fontclass">icon-mic-off</div>
			</li>
			<li>
				<i class="icon-mic"></i>
				<div class="fontclass">icon-mic</div>
			</li>
			<li>
				<i class="icon-minimize"></i>
				<div class="fontclass">icon-minimize</div>
			</li>
			<li>
				<i class="icon-minus-circle"></i>
				<div class="fontclass">icon-minus-circle</div>
			</li>
			<li>
				<i class="icon-minus-square"></i>
				<div class="fontclass">icon-minus-square</div>
			</li>
			<li>
				<i class="icon-minus"></i>
				<div class="fontclass">icon-minus</div>
			</li>
			<li>
				<i class="icon-monitor"></i>
				<div class="fontclass">icon-monitor</div>
			</li>
			<li>
				<i class="icon-moon"></i>
				<div class="fontclass">icon-moon</div>
			</li>
			<li>
				<i class="icon-more-horizontal"></i>
				<div class="fontclass">icon-more-horizontal</div>
			</li>
			<li>
				<i class="icon-more-vertical"></i>
				<div class="fontclass">icon-more-vertical</div>
			</li>
			<li>
				<i class="icon-move"></i>
				<div class="fontclass">icon-move</div>
			</li>
			<li>
				<i class="icon-music"></i>
				<div class="fontclass">icon-music</div>
			</li>
			<li>
				<i class="icon-pause"></i>
				<div class="fontclass">icon-pause</div>
			</li>
			<li>
				<i class="icon-phone"></i>
				<div class="fontclass">icon-phone</div>
			</li>
			<li>
				<i class="icon-pie-chart"></i>
				<div class="fontclass">icon-pie-chart</div>
			</li>
			<li>
				<i class="icon-play"></i>
				<div class="fontclass">icon-play</div>
			</li>
			<li>
				<i class="icon-plus-circle"></i>
				<div class="fontclass">icon-plus-circle</div>
			</li>
			<li>
				<i class="icon-plus-square"></i>
				<div class="fontclass">icon-plus-square</div>
			</li>
			<li>
				<i class="icon-plus"></i>
				<div class="fontclass">icon-plus</div>
			</li>
			<li>
				<i class="icon-pocket"></i>
				<div class="fontclass">icon-pocket</div>
			</li>
			<li>
				<i class="icon-power"></i>
				<div class="fontclass">icon-power</div>
			</li>
			<li>
				<i class="icon-printer"></i>
				<div class="fontclass">icon-printer</div>
			</li>
			<li>
				<i class="icon-radio"></i>
				<div class="fontclass">icon-radio</div>
			</li>
			<li>
				<i class="icon-reduce"></i>
				<div class="fontclass">icon-reduce</div>
			</li>
			<li>
				<i class="icon-refresh-cw"></i>
				<div class="fontclass">icon-refresh-cw</div>
			</li>
			<li>
				<i class="icon-rewind"></i>
				<div class="fontclass">icon-rewind</div>
			</li>
			<li>
				<i class="icon-rotate-ccw"></i>
				<div class="fontclass">icon-rotate-ccw</div>
			</li>
			<li>
				<i class="icon-rotate-cw"></i>
				<div class="fontclass">icon-rotate-cw</div>
			</li>
			<li>
				<i class="icon-scissors"></i>
				<div class="fontclass">icon-scissors</div>
			</li>
			<li>
				<i class="icon-search"></i>
				<div class="fontclass">icon-search</div>
			</li>
			<li>
				<i class="icon-share"></i>
				<div class="fontclass">icon-share</div>
			</li>
			<li>
				<i class="icon-shuffle"></i>
				<div class="fontclass">icon-shuffle</div>
			</li>
			<li>
				<i class="icon-signal"></i>
				<div class="fontclass">icon-signal</div>
			</li>
			<li>
				<i class="icon-skip-back"></i>
				<div class="fontclass">icon-skip-back</div>
			</li>
			<li>
				<i class="icon-skip-forward"></i>
				<div class="fontclass">icon-skip-forward</div>
			</li>
			<li>
				<i class="icon-slash"></i>
				<div class="fontclass">icon-slash</div>
			</li>
			<li>
				<i class="icon-square"></i>
				<div class="fontclass">icon-square</div>
			</li>
			<li>
				<i class="icon-star"></i>
				<div class="fontclass">icon-star</div>
			</li>
			<li>
				<i class="icon-sun"></i>
				<div class="fontclass">icon-sun</div>
			</li>
			<li>
				<i class="icon-sunrise"></i>
				<div class="fontclass">icon-sunrise</div>
			</li>
			<li>
				<i class="icon-sunset"></i>
				<div class="fontclass">icon-sunset</div>
			</li>
			<li>
				<i class="icon-tag"></i>
				<div class="fontclass">icon-tag</div>
			</li>
			<li>
				<i class="icon-target"></i>
				<div class="fontclass">icon-target</div>
			</li>
			<li>
				<i class="icon-thermometer"></i>
				<div class="fontclass">icon-thermometer</div>
			</li>
			<li>
				<i class="icon-thumbs-down"></i>
				<div class="fontclass">icon-thumbs-down</div>
			</li>
			<li>
				<i class="icon-thumbs-up"></i>
				<div class="fontclass">icon-thumbs-up</div>
			</li>
			<li>
				<i class="icon-toggle-left"></i>
				<div class="fontclass">icon-toggle-left</div>
			</li>
			<li>
				<i class="icon-toggle-right"></i>
				<div class="fontclass">icon-toggle-right</div>
			</li>
			<li>
				<i class="icon-trash-empty"></i>
				<div class="fontclass">icon-trash-empty</div>
			</li>
			<li>
				<i class="icon-trash"></i>
				<div class="fontclass">icon-trash</div>
			</li>
			<li>
				<i class="icon-triangle"></i>
				<div class="fontclass">icon-triangle</div>
			</li>
			<li>
				<i class="icon-umbrella"></i>
				<div class="fontclass">icon-umbrella</div>
			</li>
			<li>
				<i class="icon-unlock"></i>
				<div class="fontclass">icon-unlock</div>
			</li>
			<li>
				<i class="icon-upload-cloud"></i>
				<div class="fontclass">icon-upload-cloud</div>
			</li>
			<li>
				<i class="icon-upload"></i>
				<div class="fontclass">icon-upload</div>
			</li>
			<li>
				<i class="icon-user-minus"></i>
				<div class="fontclass">icon-user-minus</div>
			</li>
			<li>
				<i class="icon-user-plus"></i>
				<div class="fontclass">icon-user-plus</div>
			</li>
			<li>
				<i class="icon-user"></i>
				<div class="fontclass">icon-user</div>
			</li>
			<li>
				<i class="icon-video-off"></i>
				<div class="fontclass">icon-video-off</div>
			</li>
			<li>
				<i class="icon-video"></i>
				<div class="fontclass">icon-video</div>
			</li>
			<li>
				<i class="icon-watch"></i>
				<div class="fontclass">icon-watch</div>
			</li>
			<li>
				<i class="icon-wifi"></i>
				<div class="fontclass">icon-wifi</div>
			</li>
			<li>
				<i class="icon-x-circle"></i>
				<div class="fontclass">icon-x-circle</div>
			</li>
			<li>
				<i class="icon-x-square"></i>
				<div class="fontclass">icon-x-square</div>
			</li>
			<li>
				<i class="icon-zap"></i>
				<div class="fontclass">icon-zap</div>
			</li>
			<li>
				<i class="icon-zoom-in"></i>
				<div class="fontclass">icon-zoom-in</div>
			</li>
			<li>
				<i class="icon-zoom-out"></i>
				<div class="fontclass">icon-zoom-out</div>
			</li>
		</ul>
	</div>
</body>
</html>
